(() => {
    class UiProgress extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({ mode: 'open' });
            this._progress = 0; // 默认进度值
            this._max = 100; // 最大进度值
        }

        /**
         * 定义需要观察的属性
         * @returns {string[]} 观察的属性列表
         */
        static get observedAttributes() {
            return ['progress', 'max'];
        }

        /**
         * 属性变化回调函数
         * @param {string} name 属性名
         * @param {string} oldValue 旧值
         * @param {string} newValue 新值
         */
        attributeChangedCallback(name, oldValue, newValue) {
            if (oldValue !== newValue) {
                if (name === 'progress') {
                    this._progress = +(
                        (parseInt(newValue) || 0).toFixed(0)
                    );
                    this.updateProgress();
                } else if (name === 'max') {
                    this._max = parseInt(newValue) || 100;
                    this.updateProgress();
                }
            }
        }

        /**
         * 组件连接到DOM时的回调
         */
        connectedCallback() {
            this.render();
            this.updateProgress();
        }

        /**
         * 组件从DOM断开时的回调
         */
        disconnectedCallback() {
            // 清理工作（如果需要）
        }

        /**
         * 渲染组件的HTML结构和样式
         */
        render() {
            const style = document.createElement('style');
            style.textContent = `
            .progress-container {
                width: 100%;
                margin-bottom: 8px;
            }
            .progress-title {
                text-align: center;
                font-size: 14px;
                color: rgba(102, 72, 234, 1);
                font-weight: 500;
                margin-bottom: 10px;
            }
            .progress-bar-wrap {
                display: flex;
                align-items: center;
                gap: 0 10px;
                margin-bottom: 5px;
            }
            .progress-bar {
                width: 100%;
                height: 8px;
                background-color: #e5e7eb;
                border-radius: 4px;
                overflow: hidden;
            }
            .progress-fill {
                height: 100%;
                background: linear-gradient(270deg, rgba(111, 194, 250, 1) 0%, rgba(141, 137, 244, 1) 25%, rgba(132, 86, 233, 1) 77%, rgba(102, 72, 234, 1) 100%);
                border-radius: 4px;
                transition: width 0.3s ease;
            }
            .progress-percentage {
                font-size: 14px;
                color: rgba(102, 72, 234, 1);
                font-weight: 500;
            }
            .progress-text {
                text-align: center;
                font-size: 14px;
                color: #a855f7;
                flex-shrink: 0;
            }
            `;

            const container = document.createElement('div');
            container.className = 'progress-container';
            container.innerHTML = `
            <div class="progress-title">
                <slot name="title"></slot>
            </div>
            <div class="progress-bar-wrap">
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 0%;"></div>
                </div>
                <div class="progress-percentage">0%</div>
            </div>
            <div class="progress-text">
                <slot></slot>
            </div>
            `;
            const progressFill = container.querySelector('.progress-fill');
            const progressPercentage = container.querySelector('.progress-percentage');
            this.shadowRoot.appendChild(style);
            this.shadowRoot.appendChild(container);
            this._progressFill = progressFill;
            this._progressPercentage = progressPercentage;
        }

        /**
         * 更新进度条显示
         */
        updateProgress() {
            if (!this._progressFill || !this._progressPercentage) return;
            const percentage = Math.min(
                this._max,
                Math.max(0, this._progress)
            );
            this._progressFill.style.width = `${percentage}%`;
            this._progressPercentage.textContent = `${percentage}%`;
        }

        /**
         * 获取进度值
         */
        get progress() {
            return this._progress;
        }

        /**
         * 设置进度值
         */
        set progress(value) {
            this.setAttribute('progress', value);
        }

        /**
         * 获取最大值
         */
        get max() {
            return this._max;
        }

        /**
         * 设置最大值
         */
        set max(value) {
            this.setAttribute('max', value);
        }

    }
    if (!customElements.get('ui-progress')) {
        customElements.define('ui-progress', UiProgress);
    }
})();